<script setup lang="ts">
import { getPlaylistDetailAPI } from '@/services/playlist'
import { onMounted, ref, onBeforeMount } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MyHeader from '@/components/header/myHeader.vue'

// 接收页面参数
const query = defineProps<{
  id: number
}>()

const playlistDetaiData = ref<any>()

// 获取歌单详情
function getPlaylistDetailData() {
  getPlaylistDetailAPI(query.id).then((res) => {
    playlistDetaiData.value = res
  })
}

function formatNumberToChineseUnit(num: number): string {
  const yi = 100000000 // 一亿
  const wan = 10000 // 一万

  if (num < wan) {
    return num.toString()
  } else if (num < yi) {
    const w = Math.floor(num / wan)
    const r = num % wan
    if (r === 0) {
      return `${w}万`
    } else {
      return `${w}.${(r / 1000).toFixed(1)}万`
    }
  } else {
    const y = Math.floor(num / yi)
    const r = num % yi
    if (r === 0) {
      return `${y}亿`
    } else {
      return `${y}.${(r / 10000000).toFixed(1)}亿`
    }
  }
}

function toSongPlay(id: number) {
  uni.navigateTo({
    url: `/pages/play/play?id=${id}`,
  })
}

// 页面加载时获取歌单详情
onLoad(() => {
  getPlaylistDetailData()
})
</script>

<template>
  <view class="song-list-details">
    <MyHeader :title="playlistDetaiData?.playlist.name" />

    <view
      class="header"
      :style="{
        background: 'url(' + playlistDetaiData?.playlist?.coverImgUrl + ')',
      }"
    >
      <view class="cover-wrap">
        <image :src="playlistDetaiData?.playlist?.coverImgUrl" class="cover" />
        <view>{{ formatNumberToChineseUnit(playlistDetaiData?.playlist.playCount) }}</view>
      </view>
      <view class="creator">
        <view class="name">{{ playlistDetaiData?.playlist.name }}</view>
        <view class="creator-info">
          <image :src="playlistDetaiData?.playlist.creator.avatarUrl" class="creator-avatar" />
          <view class="creator-name"> {{ playlistDetaiData?.playlist.creator.nickname }}</view>
        </view>
        <view class="description">{{ playlistDetaiData?.playlist.description }}</view>
      </view>
    </view>
    <view class="song-list">
      <view class="song-list-title">
        <view class="song-list-title-text"
          >播放全部
          <view>({{ playlistDetaiData?.playlist.tracks.length }})</view>
        </view>
      </view>
      <view
        class="song-list-item"
        @click="toSongPlay(item.id)"
        v-for="(item, index) in playlistDetaiData?.playlist.tracks"
        :key="index"
      >
        <view class="left">
          <view class="no">{{ index + 1 }}</view>
          <view class="info">
            <view class="name"> {{ item.name }}</view>
            <view class="singer">
              <image src="../../static/images/sq.png" class="sq" />
              <view class="singer-name" v-for="(ar, arI) in item.ar" :key="ar.id">
                <view v-if="arI != 0">/</view>
                {{ ar.name }}
              </view>
            </view>
          </view>
        </view>
        <image class="play" src="../../static/images/play.png" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.header {
  margin-top: -50px;
  height: 300px;
  padding: 50px;
  display: flex;
  .cover-wrap {
    margin-top: 20px;
    position: relative;
    width: 160px;
    height: 160px;
    .cover {
      width: 160px;
      height: 160px;
      border-radius: 10px;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    }
    view {
      position: absolute;
      right: 10px;
      top: 10px;
      color: #fff;
    }
  }
  .creator {
    margin-top: 20px;
    margin-left: 30px;
    color: #fff;

    .name {
      font-size: 18px;
      margin-bottom: 15px;
    }
    .description {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }
    .creator-info {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .creator-avatar {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 5px;
      }
    }
  }
}
.song-list {
  margin-top: -20px;
  padding: 20px;
  width: 100%;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  background: #fff;
  .song-list-title {
    display: flex;
    margin-bottom: 40rpx;
    .song-list-title-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      letter-spacing: 1.2px;
      view {
        color: #bebebe;
        font-size: 14px;
      }
    }
  }
  .song-list-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40rpx;
    .left {
      display: flex;
      .no {
        width: 50px !important;
        color: #8e8e8e;
      }
      .info {
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .singer {
          margin-top: 5px;
          display: flex;
          font-size: 12px;
          .sq {
            margin-top: 3px;
            width: 13px;
            height: 13px;
            margin-right: 5px;
          }
          .singer-name {
            display: flex;
            color: #8e8e8e;
            view {
            }
          }
        }
      }
    }
    .play {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
